<template>
  <!-- 试题选择 -->
  <div class="quest_warpper">
    <a-collapse v-model:activeKey="activeKey">
      <a-collapse-panel
        v-for="item in examList"
        :key="item.id"
        :header="item.typeName"
        class="button_warpper"
      >
        <template v-for="exam in item.types" :key="exam.id">
          <a-button type="dashed" @click="handleExam(exam)">{{
            exam.typeName
          }}</a-button>
        </template>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>
<script lang="ts">
import { QuestsType, QuestType } from '@/store/design/types';
import { defineComponent, ref } from 'vue';
export default defineComponent({
  components: {},
  props: {
    /** 题目列表 */
    examList: { type: Array, default: () => [] },
    /** 问卷类型 */
    type: { type: Number, default: 1 },
  },
  emits: [
    /** 点击天机题型 */
    'handleExam',
  ],
  setup(props, { emit }) {
    const activeKey = ref(
      (props.examList as QuestsType[]).map((item) => item.id),
    );
    const handleExam = (value: QuestType) => {
      // console.log(value);
      emit('handleExam', value);
    };
    return { activeKey, handleExam };
  },
});
</script>
<style lang="less" scoped>
.quest_warpper {
  .button_warpper {
    widows: 100%;
    display: flex;
    flex-wrap: wrap;
    button {
      width: 50%;
    }
  }
  :global(.ant-collapse-header) {
    width: 100%;
  }
  :global(.ant-collapse-content) {
    width: 100%;
  }
}
</style>
